<template>
  <div>
    <div class="form-view-row">
      <label>{{ displayName }}</label>
      <div
        class="form-view-row-content"
        style="flex: 0 1 auto; margin-right: 12px"
      >
        {{ _value }}
      </div>
      <base-trajectory :type="2"></base-trajectory>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FormActualMileageLabelView',

  props: {
    field: {
      type: Object,
      default: () => ({}),
    },
    value: {
      type: [Number, String],
      default: 0,
    },
  },

  data() {
    return {};
  },

  mounted() {},

  methods: {},

  computed: {
    displayName() {
      return this.field?.displayName;
    },
    _value() {
      if (['', null, undefined].includes(this.value)) {
        return `${Number(this.field?.defaultValue || 0)?.toFixed(2)}km`;
      } else {
        return `${Number(this.value || 0)?.toFixed(2)}km`;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
